<template>
  <view class="content">
    <u-upload
      v-bind="$attrs"
      upload-icon="plus"
      :file-list="mkdirFileList"
      @after-read="handleUpload"
      @oversize="oversizeTip"
    ></u-upload>
  </view>
</template>
<script lang="ts">
export default {
  options: {
    styleIsolation: "shared",
  },
};
</script>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { watch } from "vue";
import { useUpload, mkdirFileList } from "@/hooks/useUpload";
watch(mkdirFileList, (newVal) => {
  console.log("🚀 ~ mkdirFileList ~ newVal:", newVal);
});
onLoad((query) => {
  console.log("🚀 ~ onLoad ~ query:", query);
});

const { handleUpload, oversizeTip } = useUpload();

defineExpose({
  mkdirFileList,
});
</script>
<style scoped lang="scss">
/* 使用v-bind绑定state中的变量 */
/* color: v-bind('state.color'); */
.content {
  :deep(.u-upload__button) {
    border-radius: 20rpx !important;
    background-color: #f7f7f9 !important;
  }
  :deep(.uicon-plus) {
    font-size: 28rpx !important;
    line-height: 28rpx !important;
  }
}
</style>
